<template>
    <div>
        <detail-banner :sightName="sightName" :bannerImg="bannerImg" :bannerImgs="gallaryImgs"></detail-banner>
        <detail-header></detail-header>
        <detail-list :list="list"></detail-list>
    </div>
</template>

<script>
import DetailBanner from './components/Banner.vue'
import DetailHeader from './components/Header.vue'
import DetailList from './components/List.vue'
import axios from 'axios'
export default {
    name:'DetailPage',
    components:{DetailBanner,DetailHeader,DetailList},
    data(){
    return{
        sightName:'',
        bannerImg:'',
        gallaryImgs:[],
        list:[]
    }
    },
    methods:{
      getDetailInfo(){
        axios.get('/api/detail.json',{
          params:{
            id:this.$route.params.id
          }
        })
        .then(this.handleGetDetailInfoSucc)
      },
      handleGetDetailInfoSucc(res){
        if (res.status == 200) {
          this.sightName = res.data.data.sightName
          this.bannerImg = res.data.data.bannerImg
          this.gallaryImgs = res.data.data.gallaryImgs
          this.list = res.data.data.categoryList
        }
      }
    },
    mounted(){
      this.getDetailInfo()
    }
}
</script>

<style lang="stylus" scoped>

</style>